<template>
  <el-container class="h-100" v-loading="model.loading">
    <el-header class="shadow-sm d-flex justify-content-center bg-white" style="height: 80px;">
      <div class="w-100" style="line-height: 80px;">
        <el-button icon="el-icon-back" circle size="small" class="mr-3" @click="$router.go(-1)"
          v-permission="[1, 3]"></el-button>
        <h5 class="d-inline">区县作业单位</h5>
        <div class="float-right">
          <el-select v-model="cityId" placeholder="请选择市" style="width: 200px;" clearable @change="newSearch"
            v-permission="[1]">
            <el-option v-for="(val, key) in city" :filterable="true" :key="key" :label="val" :value="key">
            </el-option>
          </el-select>
          <el-select v-model="areaId" placeholder="请选择区县" ref="area" @change="newSearch" clearable
            v-permission="[1, 3]">
            <el-option v-for="(val, key) in area" :filterable="true" :key="key" :label="val" :value="key">
            </el-option>
          </el-select>
          <el-button type="primary" size="small" @click="addOrUpdateVisible=true" v-permission="[4]">添加作业单位</el-button>
        </div>
      </div>
    </el-header>
    <el-main class="p-2 m-2 bg-white">
      <el-table :data="model.rows">
        <el-table-column label="序号" min-width="50" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 + model.pageSize * (model.pageIndex - 1) }}
          </template>
        </el-table-column>
        <el-table-column prop="dutyAreaName" label="区域" align="center" v-if="$store.getters.userType !== 4"></el-table-column>
        <el-table-column prop="name" label="公司名称" align="center"></el-table-column>
        <el-table-column prop="address" label="公司地址" align="center"></el-table-column>
        <el-table-column prop="legalPerson" label="法人代表" align="center"></el-table-column>
        <el-table-column prop="contacts" label="项目负责人" align="center"></el-table-column>
        <el-table-column prop="contactsPhone" label="联系方式" width="250" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-tooltip content="查看详情" placement="top" v-permission="[1, 3]">
              <i class="el-icon-document" style="font-size: 1.2rem;" @click="checkInfo(scope.row)"></i>
            </el-tooltip>

            <el-tooltip content="编辑" placement="top" v-permission="[4]">
              <i class="el-icon-edit" style="font-size: 1.2rem;" @click="restInfo(scope.row)"></i>
            </el-tooltip>
            <el-tooltip content="删除" placement="top" v-permission="[4]">
              <i class="el-icon-delete ml-3" style="font-size: 1.2rem;" @click="deleteItem(scope.row)"></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-show="model.rows.length > 0" class="text-right py-3 pr-5 bg-white"
        @size-change="handleSizeChange" @current-change="val => this.model.pageLoad(val)"
        :current-page.sync="model.pageIndex" :page-sizes="[20, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper"
        :total="model.count" :pager-count="7">
      </el-pagination>
    </el-main>
    <el-dialog title="作业单位详情" :close-on-click-modal="false" :visible.sync="dialogVisible" @closed="clearRuleForm"
      width="700px">
      <form>
        <div class="form-group row">
          <label class="col-sm-3 col-form-label text-right">企业名称</label>
          <div class="col-sm-9 pt-2">
            <span class="col-form-label">{{ row.name }}</span>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-3 col-form-label text-right">法人代表</label>
          <div class="col-sm-9 pt-2">
            <span>{{ row.legalPerson }}</span>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-3 col-form-label text-right">纳税人识别号</label>
          <div class="col-sm-9 pt-2">
            <span>{{ row.taxpayerId }}</span>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-3 col-form-label text-right">联系人</label>
          <div class="col-sm-9 pt-2">
            <span>{{ row.contacts }}</span>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-3 col-form-label text-right">详细地址</label>
          <div class="col-sm-9 pt-2">
            <span>{{ row.address }}</span>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-3 col-form-label text-right">项目负责人</label>
          <div class="col-sm-9 pt-2">
            <span>{{ row.contacts }}</span>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-3 col-form-label text-right">联系方式</label>
          <div class="col-sm-9 pt-2">
            <span>{{ row.contactsPhone }}</span>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-3 col-form-label text-right">所在地址</label>
          <div class="col-sm-9 pt-2">
            <span>{{ row.provinceName + row.cityName + row.areaName}}</span>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-3 col-form-label text-right">测绘资质</label>
          <div class="col-sm-9 pt-2">
            <span>{{ row.qualifications }}</span>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-3 col-form-label text-right">企业简介</label>
          <div class="col-sm-9 pt-2">
            <span>{{ row.unitIntroduction }}</span>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-3 col-form-label text-right">设备组成</label>
          <div class="col-sm-9 pt-2">
            <span>{{ row.equipmentIntroduction }}</span>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-3 col-form-label text-right">人员组成</label>
          <div class="col-sm-9 pt-2">
            <span>{{ row.personnelIntroduction }}</span>
          </div>
        </div>
        <div class="form-group row" v-viewer>
          <label class="col-sm-3 col-form-label text-right">照片对比</label>
          <div class="col-sm-9 pt-2">
            <div class="d-inline-block mr-2" v-for="(item, index) in row.img" :key='index'>
              <img :src="item.filePath" style="height:200px;width:200px;text-align:center" />
              <p class="text-center">营业执照</p>
            </div>
          </div>
        </div>
        <div class="form-group row" v-viewer>
          <label class="col-sm-3 col-form-label text-right">附件</label>
          <ul class="list-unstyled">
            <li v-for="(item, index) in row.path" :key="index">
              <span>{{item.fileName}}</span>
              <el-button type="text" class="ml-5" @click="downfile(item)">下载</el-button>
            </li>
          </ul>
        </div>
      </form>
    </el-dialog>

    <el-dialog :title="Boolean(ruleForm.id)? '修改作业单位' : '添加作业单位'" :close-on-click-modal="false"
      :visible.sync="addOrUpdateVisible" @closed="clearRuleForm" width="700px">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="企业名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="测绘资质" prop="qualifications">
          <el-select v-model="ruleForm.qualifications" placeholder="请选择">
            <el-option label="甲级" value="甲级"></el-option>
            <el-option label="乙级" value="乙级"></el-option>
            <el-option label="丙级" value="丙级"></el-option>
            <el-option label="丁级" value="丁级"></el-option>
            <el-option label="无" value="无"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="法人代表" prop="legalPerson">
          <el-input v-model="ruleForm.legalPerson"></el-input>
        </el-form-item>
        <el-form-item label="纳税人识别号" prop="taxpayerId">
          <el-input v-model="ruleForm.taxpayerId"></el-input>
        </el-form-item>
        <el-form-item label="企业地址" prop="allName">
          <city-cascader ref="city" name="企业地址" v-model="ruleForm.allName" :provinceCode.sync="ruleForm.provinceId"
            :areaCode.sync="ruleForm.areaId" :cityCode.sync="ruleForm.cityId"></city-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item label="项目负责人" prop="contacts">
          <el-input v-model="ruleForm.contacts"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="contactsPhone">
          <el-input v-model="ruleForm.contactsPhone"></el-input>
        </el-form-item>
        <el-form-item label="单位简介" prop="unitIntroduction">
          <el-input v-model="ruleForm.unitIntroduction" placeholder="请输入单位简介（2-200位）" type="textarea"
            :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="人员简介" prop="personnelIntroduction">
          <el-input v-model="ruleForm.personnelIntroduction" placeholder="请输入人员简介（2-200位）" type="textarea"
            :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="设备简介" prop="equipmentIntroduction">
          <el-input v-model="ruleForm.equipmentIntroduction" placeholder="请输入设备简介（2-200位）" type="textarea"
            :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm.remark" placeholder="请输入备注（2-200位）" type="textarea" :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="企业营业执照" prop="img">
          <file-upload ref="imgUpload" :is-display="true" list-type="picture-card" :limit="5"
            accept="image/*, .jpg, .png, .jpeg" v-model="ruleForm.img" name="photo" init-name="gerentouxiang.png">
            <i class="el-icon-plus"></i>
          </file-upload>
        </el-form-item>
        <el-form-item label="其他附件">
          <file-upload ref="pathUpload" v-model="ruleForm.path" :multiple="true">
            <el-button slot="trigger" class="width-200">选取文件</el-button>
            <p class="text-muted d-inline">选择文件 支持上传的文件类型: (.jpg .png .rar .txt .zip .doc .ppt .xls
              .pdf .docx .xlsx .pptx)</p>
          </file-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')" :loading="model.loading">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>
<script>
import PagedList from "../../../libs/PagedList"
import pca from '@/libs/pca-code'

export default {
  name: 'workcity',
  title: '市级作业单位',
  data() {
    const validateCity = (rule, value, callback) => {
      let arr = value.split(' ')
      for (var i = 0; i < arr.length - 1; i++) {
        if (arr[i].length === 0) {
          callback(new Error('请选择省市县'))
          return
        }
      }
      callback()
    }
    const validateImg = (rule, value, callback) => {
      if (value.length === 0) {
        callback(new Error('请上传营业执照'))
      } else {
        callback()
      }

    }
    let url = this.$store.getters.userType === 4 ? 'survey/enterprise/getEnterprise' : 'survey/enterprise/getByAreaCompany'
    return {
      model: new PagedList(url, 20),
      cityId: '',
      areaId: '',
      dialogVisible: false,
      addOrUpdateVisible: false,
      row: {
        img: [],
        path: []
      },
       ruleForm: {
        name: '',
        qualifications: '',
        legalPerson: '',
        taxpayerId: '',
        allName: '',
        provinceId: '',
        areaId: '',
        cityCode: '',
        address: '',
        contacts: '',
        contactsPhone: '',
        img: [],
        path: [],
        unitIntroduction: '',
        personnelIntroduction: '',
        equipmentIntroduction: '',
        remark: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入名称名称', trigger: 'blur' }
        ],
        qualifications: [
          { required: true, message: '请选择测绘资质', trigger: 'blur' }
        ],
        legalPerson: [
          { required: true, message: '请输入法人代表', trigger: 'blur' }
        ],
        taxpayerId: [
          { required: true, message: '请输入纳税人识别号', trigger: 'blur' }
        ],
        allName: [
          { required: true, message: '请选择企业地址', trigger: 'blur' },
          { validator: validateCity, trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ],
        contacts: [
          { required: true, message: '请输入项目负责人', trigger: 'blur' }
        ],
        contactsPhone: [
          { required: true, message: '请输入固定电话号码或者手机号', trigger: 'blur' }
        ],
        unitIntroduction: [
          { required: true, message: '请输入请输入单位简介', trigger: 'blur' }
        ],
        personnelIntroduction: [
          { required: true, message: '请输入人员简介', trigger: 'blur' }
        ],
        equipmentIntroduction: [
          { required: true, message: '请输入设备简介', trigger: 'blur' }
        ],
        img: [
          { required: true, message: '请选择企业地址', trigger: 'blur' },
          { validator: validateImg, trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.newSearch();
  },
  methods: {
    newSearch() {
      this.$nextTick(() => {
        this.model.search({ cityId: this.cityId, areaId: this.areaId });
      })
    },
    handleSizeChange(pageSize) {
      this.model.pageSize = pageSize
      this.newSearch();
    },
    checkInfo(row) {
      this.row = row
      this.$nextTick(() => {
        this.dialogVisible = true
      })
    },
    // clearRuleForm() {
    //   this.row = {
    //     img: [],
    //     path: []
    //   }
    // },
    downfile(item) {
      this.$exportExcel(`survey/file/downloadFile?fileUrl=${item.filePath}&fileName=${item.fileName}&oauth=${this.$store.state.user.user.oauth}`)
    },
    submitForm() {
      // survey/office/insertOrUpdateSurveyTeamInfo
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.model.loading = true
          let url = 'survey/enterprise/addEnterprise'
          this.ruleForm.id ? url = 'survey/enterprise/updateEnterprise' : ''
          this.$post(url, this.ruleForm, { convert: false }).then(res => {
            this.$message({
              message: this.ruleForm.id ? '修改成功' : '新建成功',
              type: 'success'
            })
            this.addOrUpdateVisible = false
            this.newSearch()
          }).finally(() => {
            this.model.loading = false
          })
        } else {
          return false;
        }
      });
    },
    restInfo(row) {
      this.ruleForm = Object.assign({}, row)
      this.$nextTick(() => {
        this.addOrUpdateVisible = true
      })
    },
    deleteItem(row) {
      this.$confirm(`确认删除 ${row.name} ?`, "确认删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$get('survey/enterprise/deleteEnterprise', { id: row.id }).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.newSearch()
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      })

    },
    clearRuleForm() {
      // 清空营业执照
      this.$refs.imgUpload.clearFiles()
      // 清空附件
      this.$refs.pathUpload.clearFiles()
      this.ruleForm = {
        name: '',
        qualifications: '',
        legalPerson: '',
        taxpayerId: '',
        allName: '',
        provinceId: '',
        areaId: '',
        cityCode: '',
        address: '',
        contacts: '',
        contactsPhone: '',
        img: [],
        path: [],
        unitIntroduction: '',
        personnelIntroduction: '',
        equipmentIntroduction: '',
        remark: '',
      }

      this.$refs.ruleForm.resetFields();
    }
  },
  computed: {
    city() {
      return pca[610000]
    },
    area() {
      let type = this.$store.getters.userType
      if (type === 1) {
        this.areaId = ''
        return this.cityId ? pca[this.cityId] : {}
      } else if (type === 3) {
        return pca[this.$store.getters.cityId]
      }

    },
  }
}
</script>
<style lang='scss'>
</style>